import { useState } from 'react';
import { Card } from './ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Badge } from './ui/badge';
import { Droplet, Trash2, Box } from 'lucide-react';
import { mockFloorData } from '../data/mockData';
import type { CleaningPoint } from '../types';

export function FloorMap() {
  const [selectedBuilding, setSelectedBuilding] = useState('A栋');
  const [selectedFloor, setSelectedFloor] = useState(1);
  const [selectedPoint, setSelectedPoint] = useState<CleaningPoint | null>(null);

  const currentFloorData = mockFloorData.find(
    f => f.building === selectedBuilding && f.floor === selectedFloor
  );

  const getScoreColor = (score: number) => {
    if (score >= 90) return 'bg-green-500';
    if (score >= 80) return 'bg-blue-500';
    if (score >= 70) return 'bg-yellow-500';
    return 'bg-red-500';
  };

  const getTypeIcon = (type: string) => {
    switch (type) {
      case '卫生间':
        return <Droplet className="w-4 h-4" />;
      case '垃圾桶':
        return <Trash2 className="w-4 h-4" />;
      case '地面':
        return <Box className="w-4 h-4" />;
      default:
        return null;
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h2>楼层平面图</h2>
        <p className="text-gray-500">查看各楼栋楼层的保洁点位和评分分布</p>
      </div>

      {/* 选择器 */}
      <div className="flex flex-wrap gap-4">
        <Select value={selectedBuilding} onValueChange={setSelectedBuilding}>
          <SelectTrigger className="w-[150px]">
            <SelectValue placeholder="选择楼栋" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="A栋">A栋</SelectItem>
            <SelectItem value="B栋">B栋</SelectItem>
          </SelectContent>
        </Select>

        <Select value={selectedFloor.toString()} onValueChange={(v) => setSelectedFloor(Number(v))}>
          <SelectTrigger className="w-[150px]">
            <SelectValue placeholder="选择楼层" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1">1楼</SelectItem>
            <SelectItem value="2">2楼</SelectItem>
            <SelectItem value="3">3楼</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 平面图 */}
        <Card className="lg:col-span-2 p-6">
          <div className="mb-4">
            <h3>{selectedBuilding} - {selectedFloor}楼</h3>
          </div>
          
          <div className="relative w-full aspect-video bg-gray-50 rounded-lg border-2 border-gray-200">
            {/* 楼层轮廓 */}
            <div className="absolute inset-4 border-4 border-gray-300 rounded">
              {/* 网格线 */}
              <div className="absolute inset-0 grid grid-cols-4 grid-rows-4">
                {Array.from({ length: 16 }).map((_, i) => (
                  <div key={i} className="border border-gray-200" />
                ))}
              </div>

              {/* 保洁点位 */}
              {currentFloorData?.points.map((point) => (
                <button
                  key={point.id}
                  onClick={() => setSelectedPoint(point)}
                  className={`absolute w-12 h-12 rounded-full flex items-center justify-center text-white shadow-lg transform -translate-x-1/2 -translate-y-1/2 transition-all hover:scale-110 ${
                    getScoreColor(point.score)
                  } ${selectedPoint?.id === point.id ? 'ring-4 ring-blue-400 scale-125' : ''}`}
                  style={{
                    left: `${point.x}%`,
                    top: `${point.y}%`
                  }}
                  title={`${point.name} - 评分: ${point.score}`}
                >
                  {getTypeIcon(point.type)}
                </button>
              ))}
            </div>

            {/* 图例 */}
            <div className="absolute bottom-2 right-2 bg-white rounded-lg shadow-lg p-3 space-y-2">
              <div className="flex items-center gap-2 text-sm">
                <div className="w-4 h-4 rounded-full bg-green-500" />
                <span>优秀 (≥90)</span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <div className="w-4 h-4 rounded-full bg-blue-500" />
                <span>良好 (80-89)</span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <div className="w-4 h-4 rounded-full bg-yellow-500" />
                <span>一般 (70-79)</span>
              </div>
              <div className="flex items-center gap-2 text-sm">
                <div className="w-4 h-4 rounded-full bg-red-500" />
                <span>需改进 (&lt;70)</span>
              </div>
            </div>
          </div>
        </Card>

        {/* 点位详情 */}
        <Card className="p-6">
          <h3 className="mb-4">点位详情</h3>
          {selectedPoint ? (
            <div className="space-y-4">
              <div>
                <p className="text-sm text-gray-500 mb-1">点位名称</p>
                <p>{selectedPoint.name}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500 mb-1">类型</p>
                <Badge variant="outline">{selectedPoint.type}</Badge>
              </div>
              <div>
                <p className="text-sm text-gray-500 mb-1">评分</p>
                <div className="flex items-center gap-2">
                  <span className="text-2xl">{selectedPoint.score}</span>
                  <Badge className={getScoreColor(selectedPoint.score) + ' text-white'}>
                    {selectedPoint.score >= 90 ? '优秀' : selectedPoint.score >= 80 ? '良好' : selectedPoint.score >= 70 ? '一般' : '需改进'}
                  </Badge>
                </div>
              </div>
              <div>
                <p className="text-sm text-gray-500 mb-1">清洁状态</p>
                <Badge className={selectedPoint.isClean ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}>
                  {selectedPoint.isClean ? '已清洁' : '待清洁'}
                </Badge>
              </div>
              <div>
                <p className="text-sm text-gray-500 mb-1">最后清洁时间</p>
                <p>{selectedPoint.lastCleaned}</p>
              </div>
            </div>
          ) : (
            <div className="text-center text-gray-400 py-12">
              点击地图上的点位查看详情
            </div>
          )}
        </Card>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="p-4">
          <p className="text-sm text-gray-500">总点位数</p>
          <p className="text-2xl mt-1">{currentFloorData?.points.length || 0}</p>
        </Card>
        <Card className="p-4">
          <p className="text-sm text-gray-500">平均评分</p>
          <p className="text-2xl mt-1">
            {currentFloorData 
              ? Math.round(currentFloorData.points.reduce((acc, p) => acc + p.score, 0) / currentFloorData.points.length)
              : 0}
          </p>
        </Card>
        <Card className="p-4">
          <p className="text-sm text-gray-500">已清洁</p>
          <p className="text-2xl mt-1 text-green-600">
            {currentFloorData?.points.filter(p => p.isClean).length || 0}
          </p>
        </Card>
        <Card className="p-4">
          <p className="text-sm text-gray-500">待清洁</p>
          <p className="text-2xl mt-1 text-red-600">
            {currentFloorData?.points.filter(p => !p.isClean).length || 0}
          </p>
        </Card>
      </div>
    </div>
  );
}
